<template>
  <!-- <div class="addAddress absolute">
    <div class="list">
      <div class="item acea-row row-between-wrapper">
        <div class="name">姓名</div>
        <input
          type="text"
          placeholder="请输入姓名"
          v-model="userAddress.real_name"
          required
        />
      </div>
      <div class="item acea-row row-between-wrapper">
        <div class="name">联系电话</div>
        <input
          type="text"
          placeholder="请输入联系电话"
          v-model="userAddress.phone"
          required
        />
      </div>
      <div class="item acea-row row-between-wrapper">
        <div class="name">所在地区</div>
        <div
          class="picker acea-row row-between-wrapper select-value form-control"
        >
          <div class="address">
            <div slot="right" @click.stop="show2 = true">
              {{ model2 || "请选择收货地址" }}
            </div>
            <CitySelect
              v-model="show2"
              :callback="result2"
              :items="district"
              provance=""
              city=""
              area=""
            ></CitySelect>
          </div>
          <div class="iconfont icon-dizhi font-color-red"></div>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div class="name">详细地址</div>
        <input
          type="text"
          placeholder="请填写具体地址"
          v-model="userAddress.detail"
          required
        />
      </div>
    </div>
    <div class="default acea-row row-middle">
      <div class="select-btn">
        <div class="checkbox-wrapper">
          <label class="well-check"
            ><input
              type="checkbox"
              name=""
              value=""
              @click="ChangeIsDefault"
              :checked="userAddress.is_default ? true : false"
            /><i class="icon"></i><span class="def">设置为默认地址</span></label
          >
        </div>
      </div>
    </div>
    <div></div>
    <div class="keepBnt bg-color-red" @click="submit">立即保存</div>
    <div class="wechatAddress" v-if="isWechat && !id" @click="getAddress">
      导入微信地址
    </div>
  </div> -->

  <el-container>
        <el-header height="172px" style="padding:0 0;">
            <HomeNavigation></HomeNavigation>
            <SearchBox></SearchBox>
            <ClassNavigation></ClassNavigation>
        </el-header>
        <el-container class="addAdd">
          <el-container style="width:1090px;margin:20px auto 0;">
              <el-aside width="180px">
                  <div class="side">
                    <el-menu
                    default-active="1-3"
                    active-text-color="#b4a078"
                    @open="handleOpen"
                    @close="handleClose">
                      <el-menu-item-group>
                        <p slot="title" class="sideTitle">我的服务</p>
                        <el-menu-item index="1-1">
                           <router-link to="/user">
                            <p class="sideIetm">个人中心</p>
                          </router-link>
                          </el-menu-item>
                        <el-menu-item index="1-2">
                          <router-link to="/user/vip">
                            <p class="sideIetm">会员中心</p>
                          </router-link>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                          <router-link to="/user/add_manage">
                            <p class="sideIetm">地址信息</p>
                          </router-link>
                        </el-menu-item>
                        <el-menu-item index="1-4">
                          <router-link to="/collection">
                          <p class="sideIetm">我的收藏</p>
                          </router-link>
                          </el-menu-item>
                        <el-menu-item index="1-5">
                            <router-link to="/user/user_coupon">
                              <p class="sideIetm">优惠券</p>
                            </router-link>
                        </el-menu-item>
                      </el-menu-item-group>
                      <el-menu-item-group>
                        <p slot="title" class="sideTitle">订单管理</p>
                        <el-menu-item index="2-1">
                          <router-link to="/order/list/0">
                            <p class="sideIetm">我的订单</p>
                          </router-link>
                        </el-menu-item>
                        <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                          <p class="sideIetm">售后/退款</p>
                        </router-link></el-menu-item>
                      </el-menu-item-group>
                  </el-menu>
                </div>
              </el-aside>
            <el-main style="padding: 20px 0 20px 20px;">
              <div class="main">
                <p class="title">新建地址</p>
                <div class="table">
                  <div class="item-1 acea-row">
                    <div class="line-1">所在地区：</div>
                    <div class="line"> <v-distpicker @selected="result2" :province="address.province" :city="address.city" :area="address.area" ></v-distpicker></div>
                  </div>
                  <div class="item-2 acea-row">
                    <div class="line-1">详细地址：</div>
                    <div class="textarea">
                      <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 5}"
                      placeholder="请输入详细地址,街道，门牌号等"
                      v-model="userAddress.detail" 
                      required
                     >
                    </el-input></div>
                  </div>
                  <div class="item-3 acea-row">
                    <div class="user acea-row">
                      <div class="line-1">收货人：</div>
                      <div class="i-u"><el-input v-model="userAddress.real_name" required size="large"  placeholder="请输入收货人的名字"></el-input></div>
                    </div>
                    <div class="phone acea-row">
                      <div class="line-1">手机号码：</div>
                      <div class="i-p"><el-input v-model="userAddress.phone" required size="large" placeholder="请输入收货人的手机号码"></el-input></div>
                    </div>
                  </div>
                  <div class="item-4 acea-row">
                    <div class="chkbox" ><el-checkbox   @change="ChangeIsDefault" :checked="userAddress.is_default ? true : false"><span>设为默认</span></el-checkbox></div>
                    <div class="btn golden"><el-button   @click="submit" ><p>立即保存</p></el-button></div>
                  </div>
              </div>
              </div>
            </el-main>
          </el-container>
          <el-footer style="padding: 0;">
            <Foot></Foot>
        </el-footer>
        </el-container>
  </el-container>

</template>
<script type="text/babel">
import { CitySelect } from "vue-ydui/dist/lib.rem/cityselect";
import District from "ydui-district/dist/jd_province_city_area_id";
import { getAddress, postAddress } from "@api/user";
import attrs, { required, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { openAddress } from "@libs/wechat";
import { isWeixin } from "@utils";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import VDistpicker from 'v-distpicker';
import Foot from "@components/Foot";
export default {
  components: {
    CitySelect,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    VDistpicker,
    Foot
  },
  data() {
    return {
      show2: false,
      model2: "",
      district: District,
      id: 0,
      userAddress: { is_default: 0 },
      address: {},
      isWechat: isWeixin()
    };
  },
  mounted: function() {
    let id = this.$route.params.id;
    this.id = id;
    document.title = !id ? "添加地址" : "修改地址";
    this.getUserAddress();
  },
  methods: {
    getUserAddress: function() {
      if (!this.id) return false;
      let that = this;
      getAddress(that.id).then(res => {
        that.userAddress = res.data;
        that.model2 =
          res.data.province + " " + res.data.city + " " + res.data.district;
        that.address.province = res.data.province;
        that.address.city = res.data.city;
        that.address.district = res.data.district;
      });
    },
    getAddress() {
      openAddress().then(userInfo => {
        this.$dialog.loading.open();
        postAddress({
          id: this.id,
          real_name: userInfo.userName,
          phone: userInfo.telNumber,
          address: {
            province: userInfo.provinceName,
            city: userInfo.cityName,
            district: userInfo.countryName
          },
          detail: userInfo.detailInfo,
          is_default: 1,
          post_code: userInfo.postalCode
        })
          .then(() => {
            this.$dialog.loading.close();
            this.$dialog.toast({ mes: "添加成功" });
            this.$router.go(-1);
          })
          .catch(err => {
            this.$dialog.loading.close();
            this.$dialog.error(err.msg || "添加失败");
          });
      });
    },
    async submit() {
      let name = this.userAddress.real_name,
        phone = this.userAddress.phone,
        model2 = this.model2,
        detail = this.userAddress.detail,
        isDefault = this.userAddress.is_default;
        
      try {
        await this.$validator({
          name: [
            required(required.message("姓名")),
            attrs.range([2, 16], attrs.range.message("姓名"))
          ],
          phone: [
            required(required.message("联系电话")),
            chs_phone(chs_phone.message())
          ],
          model2: [required("请选择地址")],
          detail: [required(required.message("具体地址"))]
        }).validate({ name, phone, model2, detail });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      try {
        
        let that = this,
          data = {
            id: that.id,
            real_name: name,
            phone: phone,
            address: this.address,
            detail: detail,
            is_default: isDefault,
            post_code: ""
          };-
        postAddress(data).then(function() {
          if (that.id) that.$dialog.toast({ mes: "修改成功" });
          else that.$dialog.toast({ mes: "添加成功" });
          that.$router.go(-1);
        });
      } catch (e) {
        this.$dialog.error(e.msg);
      }
    },
    ChangeIsDefault: function(key) {
      this.userAddress.is_default = key;
      
    },
    result2(data) {
      this.model2 = data.province.value + " " + data.city.value + " " + data.area.value;
      this.address.province = data.province.value;
      this.address.city = data.city.value;
      this.address.city_id = data.city.code;
      this.address.district = data.area.value;
      console.log("data:"+JSON.stringify(data));
     console.log("model2:"+this.model2);
      
    }
  }
};
</script>

<style scoped>
  .addAdd {
    background-color: #fff;
  }
  .addAdd .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .addAdd .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

  .addAdd .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .addAdd  .main {
    width: 890px;
  }
  .addAdd  .main .title {
    font-size: 14px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    margin-bottom: 15px;
  }
  .addAdd  .main .table {
    width: 890px;
    border: 1px solid #eaeaea;
  }
  .addAdd  .main .table .item-1 {
    height: 40px;
    margin: 15px 0;
  }
  .addAdd  .main .table  .line-1 {
    width: 100px;
    line-height: 40px;
    font-size: 12px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    padding-left: 21px;
    margin-right: 15px  ;
  }
  .addAdd  .main .table .item-2 .textarea {
    width: 530px;
  }
  .addAdd  .main .table .item-3,.item-2 {
    margin-bottom: 15px;
  }
  .addAdd  .main .table .item-3 .i-u , .i-p {
    width: 200px;
  }
  .addAdd  .main .table .item-4 {
    margin: 30px 0;
  }
  .addAdd  .main .table .item-4 .chkbox {
    margin-top: 10px;
    margin-left: 120px;
    margin-bottom: 15px;
    width: 100px;
    
  }
  .addAdd  .main .table .item-4 .chkbox span {
    font-size: 12px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .addAdd  .main .table  .golden p{
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #b4a078;
  }
  .addAdd  .main .table .btn {
    margin-left: 225px;
  }
  .addAdd  .main .table  >>>.el-button--small {
    padding: 13px 30px;
    color: #999;
    border: 1px solid #999;
    background-color: #f5f3ef;
  }
  .addAdd  .main .table  >>>.el-button--small:hover {
    background-color: #fff;
  }
</style>
